<template>
	<view class="main">
		<view class="head">
			<view class="putongpingfen">
				<text>我的评分</text>
				<text>69.20</text>
				<view>
					<text>去分享加分</text>
					<image src="../../static/finishInvite-jt.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<image class="pingfenguize" @click="goToGZ()" src="../../static/pingfen/guize.png" mode="aspectFill"></image>
		<view class="pingfen-task">
			<view class="pingfen-task-title">
				<text>评分任务</text>
				<text>完成越多，评分越高</text>
			</view>
			<view class="pingfen-task-item"></view>
			<view class="pingfen-task-item"></view>
			<view class="pingfen-task-item"></view>
			<view class="pingfen-task-footer" @click="goToTask()">
				<text>查看更多</text>
				<image src="../../static/pingfen/asdasfeqwf.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="pingfenInfo">
			<view class="pingfenInfo-title">
				<image src="../../static/pingfen/123213132122.png" mode="aspectFill"></image>
				<text>评分明细</text>
			</view>
			<view class="pingfenInfo-list" v-for="item in honestList" :key="item.id">
				<view class="title">
					<view><text>{{ item.remark }}</text><view v-if="item.amount < 0" @click="selectSsId=item.id,isShowShensu=true">申诉</view></view>
					<view>{{ item.createTime }}</view>
				</view>
				<view :class="item.amount > 0 ? 'add' : 'reduce'">
					{{ item.amount > 0 ? `+${item.amount}` : item.amount }}
				</view>
			</view>

		</view>
		
		<view v-if="isShowShensu" class="mask" @touchmove.stop.prevent>
			<view class="main">
				<view class="main-title">
					<image @click="isShowShensu=false" src="../../static/close1.png" mode="aspectFill"></image>
					<text>申诉内容</text>
				</view>
				<view class="main-input-view">
					<textarea class="textarea" v-model="shensu" placeholder="请填写申诉内容" placeholder-class="placeholder" maxlength="-1" />
				</view>
				<view class="button">提交</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import unit from '../../libs/newUnit.js'
	export default {
		data() {
			return {
				requestObj: {
					type: 50,
					pageNum: 0,
					pageSize: 10,
				},
				honestList: [], //诚信值列表
				hasFlag: true, // 是否还有更多数据要加载
				isShowShensu:false,
				shensu:'',
				selectSsId:0,
			}
		},
		methods: {
			// 刷新
			refresh() {
				this.honestList = []
				this.hasFlag = true
				this.requestObj.pageNum = 0
				this.requestObj.pageSize = 10
				this.getMy_flows()
			},
			getMy_flows() {
				this.requestObj.pageNum++
				if (!this.hasFlag) return
				unit.my_flows(this.hasFlag, this.requestObj, this.honestList).then(v => {
					this.honestList = v[0]
					this.hasFlag = v[1]
				})
			},
			goToGZ(){
				uni.navigateTo({
					url:'./guize'
				})
			},
			goToTask(){
				uni.navigateTo({
					url:'./task'
				})
			},
		},
		onReachBottom() {
			this.getMy_flows() //再次调用接口
		},
		onShow() {
			this.refresh()
		},
	}
</script>

<style lang="less" scoped>
	.head {
		width: 750rpx;
		height: 380rpx;
		background: linear-gradient(45deg, #474E66, #262D46);
		position: relative;
	}

	.putongpingfen {
		background-image: url(../../static/pingfen/putong.png);
		background-size: 100% 100%;
		width: 690rpx;
		height: 296rpx;
		position: absolute;
		bottom: 30rpx;
		left: calc(50% - 345rpx);

		&>text:nth-child(1) {
			display: block;
			font-size: 24rpx;
			font-weight: 500;
			color: #6C4B44;
			line-height: 45rpx;
			margin: 30rpx 0 0 30rpx;
		}

		&>text:nth-child(2) {
			font-size: 160rpx;
			font-family: Impact;
			font-weight: 400;
			color: #6C4B44;
			margin: 0rpx 0 0 30rpx;
			position: absolute;
			bottom: 0;
		}

		&>view:nth-child(3) {
			width: 200rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			position: absolute;
			bottom: 40rpx;
			right: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			&>text:nth-child(1) {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #6C4B44;
			}

			&>image:nth-child(2) {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.pingfenguize {
		display: block;
		width: 690rpx;
		height: 148rpx;
		border-radius: 12px;
		margin: 30rpx auto 0 auto;
	}

	.pingfen-task {
		width: 690rpx;
		margin: 30rpx auto 0 auto;
	}

	.pingfen-task-title {
		width: 690rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 0 0;
		border-bottom: 1rpx solid #F2F2F2;

		&>text:nth-child(1) {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			line-height: 88rpx;
			margin: 0rpx 0 0 30rpx
		}

		&>text:nth-child(2) {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 45rpx;
			margin: 0rpx 0 0 16rpx
		}
	}

	.pingfen-task-item {
		width: 690rpx;
		height: 148rpx;
		background: #FFFFFF;
	}

	.pingfen-task-footer {
		width: 690rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 0 0 12rpx 12rpx;
		border-top: 1rpx solid #F2F2F2;
		display: flex;
		justify-content: center;
		align-items: center;

		&>text:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #7F7F7F;
		}

		&>image:nth-child(2) {
			width: 28rpx;
			height: 28rpx;
			margin-left: 8rpx;
		}
	}

	.pingfenInfo {
		width: 750rpx;
		margin-top: 30rpx;
		background-color: #FFF;
	}

	.pingfenInfo-title {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		position: sticky;
		top: var(--window-top);
		border-bottom: 1rpx solid #F5F5F5;

		&>image:nth-child(1) {
			width: 44rpx;
			height: 44rpx;
			margin-left: 30rpx;
		}

		&>text:nth-child(2) {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			line-height: 88rpx;
			margin-left: 8rpx;
		}
	}

	.pingfenInfo-list {
		width: 690rpx;
		height: 148rpx;
		margin: 0 auto;
		border-bottom: 1rpx solid #F5F5F5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title {
			&>view:nth-child(1){
				display: flex;
				align-items: center;
				&>text:nth-child(1){
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
					line-height: 45rpx;
				}
				&>view:nth-child(2){
					margin-left: 12rpx;
					width: 68rpx;
					height: 32rpx;
					background: #FE4B28;
					border-radius: 16rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 32rpx;
					text-align: center;
				}
			}
			&>view:nth-child(2){
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #7F7F7F;
				line-height: 45rpx;
			}
		}

		.add {
			font-weight: bold;
			font-size: 17px;
			color: #4E9800;
		}

		.reduce {
			font-weight: bold;
			font-size: 17px;
			color: #C9281C;
		}
	}
	.mask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		.main {
			width: 750rpx;
			// height: 660rpx;
			background: #F2F2F2;
			position: absolute;
			bottom: 0;
			border-radius: 24rpx 24rpx 0 0;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.main-title {
			width: 690rpx;
			height: 108rpx;
			display: flex;
			align-items: center;
			&>image:nth-child(1){
				width: 23rpx;
				height: 23rpx;
			}
			&>text:nth-child(2){
				display: inline-block;
				width: 644rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #000000;
				line-height: 108rpx;
				text-align: center;
			}
		}
		.main-input-view {
			width: 690rpx;
			height: 364rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin-top: 20rpx;
			.textarea {
				margin: 30rpx;
				width: 630rpx;
				height: 304rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 45rpx;
			}
			.placeholder {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ABABAB;
				line-height: 45rpx;
			}
		}
		.button {
			width: 690rpx;
			height: 88rpx;
			background-color: #FCC928;
			border-radius: 12rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #402110;
			line-height: 88rpx;
			text-align: center;
			margin: 40rpx 0;
		}
		.button-no {
			width: 690rpx;
			height: 88rpx;
			background-color: #ABABAB;
			border-radius: 12rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin: 40rpx 0;
		}
	}

</style>
